<template>
  <div class="study-plan">
    <div class="study-plan-left">
      <StudyStatus  />
      <StudyDate @handleUpdate="handleUpdate" />
    </div>   
    <StudyCalendar :UpdateTimeDate="UpdateTime" :homeworkList="homeworkList"/>
  </div>
</template>

<script  setup>
import { ref, onMounted } from 'vue';
import StudyStatus from './StudyStatus.vue';
import StudyDate from './StudyDate.vue';
import StudyCalendar from './StudyCalendar.vue'; 
import { myHomeworkList } from '@/service/personalCenter';
import dayjs from 'dayjs';
const UpdateTime=ref();
const homeworkList = ref([]);

const handleUpdate = (data) => {
  UpdateTime.value=data;
  getHomeworkList();
}

const getHomeworkList = async () => {
  try {
    const params = {
      month: UpdateTime.value ? UpdateTime.value.month : 0,
      year: UpdateTime.value ? UpdateTime.value.year : 0
    };
    const res = await myHomeworkList(params);
    res.data.map((item) => {
      item.day =Number(dayjs(item.hand_time * 1000).format('D'));
    })
    homeworkList.value = res.data || [];
  } catch (error) {
    console.error('获取作业列表失败：', error);
  }
}

onMounted(() => {
  // getHomeworkList();
});
</script>

<style lang="scss" scoped>
.study-plan{
  
  .study-plan-left{
    display: flex;
    justify-content: space-between;
    padding:20px 20px 0px;
    margin-bottom: 10px;
    // width: 300px;

  }
}
:deep(.el-divider--horizontal){
  margin:16px 0px !important;
}
</style>